<template>
  <div class="basic-layout">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <div class="logo">
            <h1>健身房后台管理系统</h1>
          </div>
          <div class="user-info">
            <el-dropdown @command="handleUserCommand">
              <span class="el-dropdown-link">
                <el-avatar :size="30" :src="userStore.userInfo?.avatar" />
                {{ userStore.userInfo?.name }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="logout" divided>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container>
        <el-aside width="200px" class="sidebar">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            router
          >
            <el-menu-item index="/dashboard">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="member">
              <template #title>
                <el-icon><User /></el-icon>
                <span>会员管理</span>
              </template>
              <el-menu-item index="/member/list">会员列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="course">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>课程管理</span>
              </template>
              <el-menu-item index="/course/list">课程列表</el-menu-item>
              <el-menu-item index="/course/category">分类管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="coach">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>教练管理</span>
              </template>
              <el-menu-item index="/coach/list">教练列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="plan">
              <template #title>
                <el-icon><Notebook /></el-icon>
                <span>健身计划</span>
              </template>
              <el-menu-item index="/plan/list">计划列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="booking">
              <template #title>
                <el-icon><Calendar /></el-icon>
                <span>课程预约</span>
              </template>
              <el-menu-item index="/booking/list">预约列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="card">
              <template #title>
                <el-icon><CreditCard /></el-icon>
                <span>会员卡管理</span>
              </template>
              <el-menu-item index="/card/list">会员卡列表</el-menu-item>
              <el-menu-item index="/card/type">卡类型管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="checkin">
              <template #title>
                <el-icon><Location /></el-icon>
                <span>签到打卡</span>
              </template>
              <el-menu-item index="/checkin/record">签到记录</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="statistics">
              <template #title>
                <el-icon><DataAnalysis /></el-icon>
                <span>数据统计</span>
              </template>
              <el-menu-item index="/statistics/dashboard">统计概览</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { House, User, Collection, Avatar, Notebook, Calendar, CreditCard, Location, DataAnalysis, ArrowDown } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const activeMenu = computed(() => route.path)

const handleUserCommand = (command: string) => {
  if (command === 'logout') {
    userStore.logout()
    router.push('/login')
  } else if (command === 'profile') {
    router.push('/profile')
  }
}
</script>

<style scoped lang="scss">
.basic-layout {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  :deep(.el-container) {
    width: 100%;
    height: 100%;
  }

  .header {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    padding: 0;
    height: 60px !important;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0 20px;

      .logo {
        h1 {
          font-size: 20px;
          font-weight: 600;
          color: $primary-color;
          margin: 0;
        }
      }

      .user-info {
        .el-dropdown-link {
          display: flex;
          align-items: center;
          cursor: pointer;

          .el-avatar {
            margin-right: 10px;
          }
        }
      }
    }
  }

  .sidebar {
    background-color: #fff;
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
    height: calc(100vh - 60px);
    overflow-y: auto;

    .sidebar-menu {
      border-right: none;
      height: 100%;
    }
  }

  .main-content {
    padding: 20px;
    background-color: #f0f2f5;
    overflow-y: auto;
    height: calc(100vh - 60px);
  }
}
</style>
